<template>
  <div class="topic-detail-container">
    <div class="topic-main">
      <div class="nav-list shadow">
        <nuxt-link :to="`/topic/${$route.params.id}?sortType=rank`" class="nav-item" :class="{'nav-item--active': sortType === 'rank'}">热门</nuxt-link>
        <nuxt-link :to="`/topic/${$route.params.id}?sortType=newest`" class="nav-item" :class="{'nav-item--active': sortType === 'newest'}">最新</nuxt-link>
      </div>
      <div class="pin-item-wrap shadow" v-for="item in pinList" :key="item.objectId">
        <pin-item :item.sync="item"></pin-item>
      </div>
    </div>
    <div class="topic-aside">
      <div class="topic-detail-block shadow">
        <div class="topic-wallpaper">
          <div class="wallpaper" :style="`background-image: url(${topicDetail.icon})`"></div>
        </div>
        <div class="topic-info">
          <div class="topic-icon" :style="`background-image: url(${topicDetail.icon})`"></div>
          <div class="topic-title">{{ topicDetail.title }}</div>
          <follow-btn :is-follow.sync="topicDetail.followed"></follow-btn>
        </div>
        <div class="topic-desc">
          <p class="desc-title">话题介绍:</p>
          <p class="desc-content">{{ topicDetail.description }}</p>
        </div>
        <div class="topic-meta">
          <div class="meta-item">
            <span class="meta-item__count">{{ topicDetail.msgsCount }}</span>
            <span>沸点</span>
          </div>
          <div class="meta-item">
            <span class="meta-item__count">{{ topicDetail.followersCount }}</span>
            <span>关注</span>
          </div>
        </div>
      </div>
      <div class="topic-attender shadow">
        <div class="topic-attender__header">
          <span class="header-count">共有{{ topicDetail.attendersCount }}人参加</span>
          <span class="header-allbtn" @click="isShowUserList = true">全部</span>
        </div>
        <div class="topic-attender__list">
          <div class="attender-item" v-for="item in attenderList.slice(0,16)" :key="item.objectId">
            <div class="attender-avatar">
              <user-avatar :url="item.avatarLarge" :round="true"></user-avatar>
            </div>
            <span class="attender-name ellipsis">{{ item.username }}</span>
          </div>
        </div>
      </div>
    </div>
    <user-list-modal :list="attenderList" :visible.sync="isShowUserList" title="参与话题的人" @reach-bottom="modalReachBottom"></user-list-modal>
  </div>
</template>

<script>
  import PinItem from "../../components/business/pinItem";
  import FollowBtn from "../../components/common/followBtn";
  import reachBottom from '~/mixins/reachBottom'

  export default {
    components: { FollowBtn, PinItem },
    async asyncData({ app, params, query }) {
      let [topicDetail, pinList, attenderList] = await Promise.all([
        app.$api.getTopicDetail({
          topicId: params.id
        }).then(res => res.s === 1 ? res.d : {}),
        app.$api.getTopicPinList({
          topicId: params.id,
          page: 1,
          pageSize: 20,
          sortType: query.sortType || 'rank'
        }).then(res => res.s === 1 ? res.d.list : []),
        app.$api.getTopicAttenderList({
          topicId: params.id,
          page: 1,
          pageSize: 20
        }).then(res => res.s === 1 ? res.d.list : []),
      ])
      return {
        topicDetail,
        pinList,
        attenderList
      }
    },
    head() {
      return {
        title: `${this.topicDetail.title} - 话题 - 沸点`
      }
    },
    validate ({ params }) {
      if (params.id && params.id != 'undefined') {
        return true
      }
      return false
    },
    watchQuery: ['sortType'],
    mixins: [reachBottom],
    data() {
      return {
        topicDetail: {},
        pinList: [],
        attenderList: [],
        pinListPage: 1,
        attenderListPage: 1,
        isShowUserList: false
      }
    },
    computed: {
      sortType() {
        return this.$route.query.sortType || 'rank'
      }
    },
    methods: {
      reachBottom() {
        this.pinListPage++
        this.getTopicPinList({ isLoadMore: true })
      },
      modalReachBottom() {
        this.attenderListPage++
        this.getTopicAttenderList({ isLoadMore: true })
      },
      async getTopicPinList({ isLoadMore = false } = {}) {
        let res = await this.$api.getTopicPinList({
          topicId: this.$route.params.id,
          page: this.pinListPage,
          pageSize: 20,
          sortType: this.sortType
        })
        if (res.s === 1) {
          this.pinList = isLoadMore ? this.pinList.concat(res.d.list) : res.d.list
        }
      },
      async getTopicAttenderList({ isLoadMore = false } = {}) {
        let res = await this.$api.getTopicAttenderList({
          topicId: this.$route.params.id,
          page: this.attenderListPage,
          pageSize: 20,
        })
        if (res.s === 1) {
          this.attenderList = isLoadMore ? this.attenderList.concat(res.d.list) : res.d.list
        }
      }
    }
  }
</script>

<style lang='scss' scoped>
  .topic-detail-container{
    display: flex;

    .topic-main{
      flex: 1;
      overflow: hidden;

      .nav-list{
        display: flex;
        justify-content: space-around;
        padding: 0 80px;
        margin-bottom: 10px;
        border-radius: 2px;
        background: #fff;

        .nav-item{
          padding: 15px;
          font-size: 15px;
          color: #909090;
          cursor: pointer;
        }

        .nav-item--active{
          position: relative;
          color: $theme;

          &::after{
            content: '';
            position: absolute;
            bottom: 5px;
            left: 50%;
            width: 60%;
            height: 3px;
            background: $theme;
            transform: translateX(-50%);
          }
        }
      }

      .pin-item-wrap{
        margin-bottom: 10px;
      }
    }

    .topic-aside{
      flex: 0 0 300px;
      width: 300px;
      margin-left: 20px;
    }
  }
  .topic-detail-block{
    background: #fff;

    .topic-wallpaper{
      width: 100%;
      height: 110px;
      overflow: hidden;

      .wallpaper{
        width: 100%;
        height: 100%;
        background-size: 120%;
        background-repeat: no-repeat;
        background-position: center;
        filter: blur(6.3px);
        transform: scale(1.1);
      }
    }

    .topic-info{
      z-index: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .topic-icon{
        width: 60px;
        height: 60px;
        margin-top: -32px;
        border: 2px solid hsla(0,0%,100%,.6);
        border-radius: 5px;
        background-size: cover;
        background-repeat: no-repeat;
      }

      .topic-title{
        margin: 10px 0;
        font-size: 15px;
        font-weight: 600;
      }
    }

    .topic-desc{
      padding: 12px;
      font-size: 14px;

      .desc-title{
        font-weight: 600;
      }

      .desc-content{
        line-height: 1.5;
      }
    }

    .topic-meta{
      display: flex;
      padding: 12px 0;
      border-top: 1px solid rgba(92,96,102,.1);

      .meta-item{
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 13px;
        color: #8a9aa9;

        &:first-child{
          border-right: 1px solid rgba(92,96,102,.1);
        }

        .meta-item__count{
          margin-bottom: 6px;
          font-size: 19px;
          font-weight: 600;
          color: #2e3135;
        }
      }
    }
  }
  .topic-attender{
    margin-top: 10px;
    border-radius: 2px;
    background: #fff;

    .topic-attender__header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;
      border-bottom: 1px solid #eee;

      .header-count{
        font-weight: 600;
        font-size: 14px;
      }

      .header-allbtn{
        display: flex;
        align-items: center;
        font-size: 14px;
        color: $theme;
        cursor: pointer;

        &:after{
          content: '';
          display: inline-block;
          width: 8px;
          height: 8px;
          margin-left: 2px;
          border: 1px solid currentColor;
          border-left-color: transparent;
          border-bottom-color: transparent;
          transform: rotate(45deg);
        }
      }
    }

    .topic-attender__list{
      display: flex;
      flex-wrap: wrap;
      padding: 10px 0;

      .attender-item{
        flex: 0 0 25%;
        width: 25%;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        color: rgb(51, 51, 51);
        overflow: hidden;

        .attender-avatar{
          width: 46px;
          height: 46px;
          margin-bottom: 5px;
        }

        .attender-name{
          max-width: 100%;
          line-height: 1.3;
        }
      }
    }
  }
</style>
